<template>
  <div>
    <h1>历史订单</h1>
    <div style="text-align: center;color: #333333;margin-top: 20px" v-show = '!this.$store.state.login && !this.$store.state.newLogin'>请先完成登录~~
       <router-link tag="p" to="/tologin" style="line-height: 30px;background-color: blue;border-radius: 6px;
       width: 40%;color: white;margin:20px auto" >登录</router-link>
    </div>
    <div class="islogin" v-show = this.$store.state.login>
      <ul>
        <li>
            <div class="box">
              <div class="image">
                <img src="https://fuss10.elemecdn.com/1/72/3c54d8b5a9b582555bc9e97430acfpng.png?imageMogr/format/webp/thumbnail/!130x130r/gravity/Center/crop/130x130/">
              </div>
              <div class="info">
                <p> 马来一号</p>
                <i class="el-icon-arrow-right"></i>
                <span>订单已送达</span>
                <h6>2019-10-10 18:10:04</h6>
              </div>
            </div>
            <div class="type">
              <span class="sp1">脆皮炸鸡+饮品</span>
              <span class="sp2">￥20</span>
            </div>
            <div class="otag">
              <span class="ts1" @click="toEstimate">立即评价</span>
              <span class="ts2">再来一单</span>
            </div>
        </li>
        <li>
          <div class="box">
            <div class="image">
              <img src="https://fuss10.elemecdn.com/1/72/3c54d8b5a9b582555bc9e97430acfpng.png?imageMogr/format/webp/thumbnail/!130x130r/gravity/Center/crop/130x130/">
            </div>
            <div class="info">
              <p> 肯德基（茂名店）那那那是的达到弄</p>
              <i class="el-icon-arrow-right"></i>
              <span>订单已送达</span>
              <h6>2019-10-10 18:10:04</h6>
            </div>
          </div>
          <div class="type">
            <span class="sp1">脆皮炸鸡+饮品</span>
            <span class="sp2">￥20</span>
          </div>
          <div class="otag">
            <span class="ts2">再来一单</span>
          </div>
        </li>
        <li>
          <div class="box">
            <div class="image">
              <img src="https://fuss10.elemecdn.com/1/72/3c54d8b5a9b582555bc9e97430acfpng.png?imageMogr/format/webp/thumbnail/!130x130r/gravity/Center/crop/130x130/">
            </div>
            <div class="info">
              <p> 马来一号</p>
              <i class="el-icon-arrow-right"></i>
              <span>订单已送达</span>
              <h6>2019-10-10 18:10:04</h6>
            </div>
          </div>
          <div class="type">
            <span class="sp1">脆皮炸鸡+饮品</span>
            <span class="sp2">￥20</span>
          </div>
          <div class="otag">
            <span class="ts1">立即评价</span>
            <span class="ts2">再来一单</span>
          </div>
        </li>
      </ul>
    </div>
    <Tabber></Tabber>
  </div>
</template>
<script>
  import Tabber from '../tabber/tabber'
  export default {
    components: {
      Tabber
    },
    methods: {
      toEstimate () {
        this.$router.push('/estimate')
      }
    }
  }
</script>
<style lang="stylus" type="text/stylus">
  @import '../../common/stylus/mixin.styl'
  h1
    padding :10px
  .islogin
    ul
      list-style :none
      li
        padding :10px 0
        border-bottom :1px solid rgba(7,17,27,.1)
        .box
          width :100%
          display :flex
          .image
            display :inline-block
            width :60px
            height :60px
            img
              width :100%
              height :100%
              border-radius :5px
          .info
            padding :10px
            display :inline-block
            flex :1
            p
              width :68%
              text-overflow :ellipsis
              white-space :nowrap
              display :inline-block
              font-weight :bold
              overflow :hidden
            i
              font-size :10px
              margin-right 8px
            span
              font-size :10px
            h6
              font-size :10px
              margin-top :7px
        .type
          font-size :12px
          .sp1
            margin-left :70px
          .sp2
            float :right
            margin-right 10px
        .otag
          position :relative
          width :100%
          color :white
          font-size :12px
          margin-top :10px
          height :20px
          .ts1
            padding :2px 5px
            border-radius :3px
            background-color :green
            float :right
            margin-right :10px
          .ts2
            padding :2px 5px
            border:1px solid rgba(7,17,27,.1)
            color:#333333
            float :right
            margin-right :10px

</style>
